<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Gravity Brain</title>

  <!-- 离线 Google 字体: Source Sans Pro -->
  <link rel="stylesheet" href="../static/css/google.css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome 图标 -->
  <link rel="stylesheet" href="../static/plugins/fontawesome-free/css/all.min.css">
  <!-- overlayScrollbars -->
  <link rel="stylesheet" href="../static/plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
  <!-- 主题样式 -->
  <link rel="stylesheet" href="../static/css/adminlte.min.css">
{#  <script type="text/javascript">#}
{#        // 定义一个函数来刷新页面#}
{#        function autoRefreshPage() {#}
{#            window.location.reload();#}
{#        }#}
{##}
{#        // 设置定时器，每隔3000毫秒（即3秒）调用一次autoRefreshPage函数#}
{#        setTimeout(autoRefreshPage, 20000);#}
{#  </script>#}
</head>
<body class="hold-transition dark-mode sidebar-mini layout-fixed layout-navbar-fixed layout-footer-fixed">
<div class="wrapper">

  <!-- Preloader -->
  <!--<div class="preloader flex-column justify-content-center align-items-center">
    <img class="animation__wobble" src="dist/img/AdminLTELogo.png" alt="AdminLTELogo" height="60" width="60">
  </div>-->

  <!-- 导航栏 -->
  <nav class="main-header navbar navbar-expand navbar-dark">
    <!-- 左侧导航栏链接 -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
      </li>
      <li class="nav-item d-none d-sm-inline-block">
        <a href="index3.html" class="nav-link">主页</a>
      </li>
    </ul>
  </nav>
  <!-- /.navbar -->

  <!-- 主侧边栏容器 -->
  <aside class="main-sidebar sidebar-dark-primary elevation-4">
    <!-- 品牌 Logo -->
    <a  class="brand-link">
      <img src="../static/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" style="opacity: .8">
      <span class="brand-text font-weight-light">重力波大脑</span>
    </a>

    <!-- Sidebar -->
    <div class="sidebar">
      <!-- 侧边栏菜单 -->
      <nav class="mt-2">
        <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
          <!-- 使用 .nav-icon 类添加图标，
               或使用 font-awesome 或其他任何图标字体库 -->
          <li class="nav-item menu-open">
            <a href="index.html" class="nav-link active">
              <i class="nav-icon fas fa-tachometer-alt"></i>
              <p>
                首页
              </p>
            </a>
          </li>

          <li class="nav-item menu-open">
            <a href="index3.html" class="nav-link active">
              <i class="nav-icon fas fa-tachometer-alt"></i>
              <p>
                气象环境信息
              </p>
            </a>
          </li>

            <li class="nav-item menu-open">
            <a href="kgs.html" class="nav-link active">
              <i class="nav-icon fas fa-tachometer-alt"></i>
              <p>
                系统知识图谱展示
              </p>
            </a>
          </li>

            <li class="nav-item menu-open">
            <a href="index2.html" class="nav-link active">
              <i class="nav-icon fas fa-tachometer-alt"></i>
              <p>
                系统功能展示
              </p>
            </a>
          </li>

          <li class="nav-item menu-open">
            <a href="#" class="nav-link active">
              <i class="nav-icon fas fa-tachometer-alt"></i>
              <p>
                功能交互
                <i class="right fas fa-angle-left"></i>
              </p>
            </a>
            <ul class="nav nav-treeview">
              <li class="nav-item">
                <a href="detect.html" class="nav-link active">
                  <i class="far fa-circle nav-icon"></i>
                  <p>图像受气象干扰影响</p>
                </a>
              </li>
              <li class="nav-item">
                <a href="anoinv.html" class="nav-link active">
                  <i class="far fa-circle nav-icon"></i>
                  <p>重力波反演温度预测</p>
                </a>
              </li>
              <li class="nav-item">
                <a href="generation.html" class="nav-link active">
                  <i class="far fa-circle nav-icon"></i>
                  <p>重力波图像生成</p>
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </nav>
      <!-- /.sidebar-menu -->
    </div>
    <!-- /.sidebar -->
  </aside>

  <!-- Content Wrapper. 包含页面内容 -->
  <div class="content-wrapper">
    <!-- 内容标题（页面标题） -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0">重力波图像质量受气象条件影响</h1>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="/">首页</a></li>
              <li class="breadcrumb-item active">图像受气象干扰影响</li>
            </ol>
          </div>
        </div>
      </div>
    </div>
    <!-- /.content-header -->
      <!-- 主体内容 -->
      <section class="content">
          <div class="container-fluid">
              <!-- 图像数据 -->
              <div class="row">
                  <div class="col-md-12">
                      <!-- USERS LIST -->
                      <div class="card">
                          <div class="card-header">
                              <h3 class="card-title">CCD相机拍摄图片</h3>

                              <div class="card-tools">
                                  <span class="badge badge-danger"></span>
                                  <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                      <i class="fas fa-minus"></i>
                                  </button>
                                  <button type="button" class="btn btn-tool" data-card-widget="remove">
                                      <i class="fas fa-times"></i>
                                  </button>
                              </div>
                          </div>
                          <!-- /.card-header -->
                          <div class="card-body p-0">
                              <ul class="users-list clearfix">
                                  <li>
                                      <div id="picture1"></div>
                                      <!--                        <img src="../../image/image2/gravity1.png" alt="User Image">-->
                                      <span><div id="timestamp1"></div></span>
                                  </li>
                                  <li>
                                      <div id="picture2"></div>
                                      <!--                        <img src="../../image/image2/gravity1.png" alt="User Image">-->
                                      <span><div id="timestamp2"></div></span>
                                  </li>
                                  <li>
                                      <div id="picture3"></div>
                                      <!--                        <img src="../../image/image2/gravity1.png" alt="User Image">-->
                                      <span><div id="timestamp3"></div></span>
                                  </li>
                                  <li>
                                      <div id="picture4"></div>
                                      <!--                        <img src="../../image/image2/gravity1.png" alt="User Image">-->
                                      <span><div id="timestamp4"></div></span>
                                  </li>
                              </ul>
                              <!-- /.users-list -->
                          </div>
                          <!-- /.card-body -->
                          <!-- /.card-footer -->
                      </div>
                      <!--/.card -->
                  </div>
                  <!-- /.col (LEFT) -->

                  <!--          <div class="col-md-6">-->
                  <!--            <div class="card">-->
                  <!--              <div class="card-header">-->
                  <!--                <h3 class="card-title">故障预测分析</h3>-->

                  <!--                <div class="card-tools">-->
                  <!--                  <button type="button" class="btn btn-tool" data-card-widget="collapse">-->
                  <!--                    <i class="fas fa-minus"></i>-->
                  <!--                  </button>-->
                  <!--                  <button type="button" class="btn btn-tool" data-card-widget="remove">-->
                  <!--                    <i class="fas fa-times"></i>-->
                  <!--                  </button>-->
                  <!--                </div>-->
                  <!--              </div>-->
                  <!--              &lt;!&ndash; /.card-header &ndash;&gt;-->
                  <!--              <div class="card-body">-->
                  <!--                <div class="row">-->
                  <!--                  <div class="col-md-8">-->
                  <!--                    <div class="chart-responsive">-->
                  <!--                        <div id = "malfunctionChart" style = "width:600px;height:500px";></div>-->
                  <!--                    </div>-->
                  <!--                    &lt;!&ndash; ./chart-responsive &ndash;&gt;-->
                  <!--                  </div>-->
                  <!--                  &lt;!&ndash; /.col &ndash;&gt;-->
                  <!--                  <div class="col-md-4">-->
                  <!--                  </div>-->
                  <!--                  &lt;!&ndash; /.col &ndash;&gt;-->
                  <!--                </div>-->
                  <!--                &lt;!&ndash; /.row &ndash;&gt;-->
                  <!--              </div>-->
                  <!--              &lt;!&ndash; /.card-body &ndash;&gt;-->
                  <!--              <div class="card-footer p-0">-->
                  <!--                <ul class="nav nav-pills flex-column">-->
                  <!--                  <div id="malfunction"></div>-->
                  <!--                </ul>-->
                  <!--              </div>-->
                  <!--              &lt;!&ndash; /.footer &ndash;&gt;-->
                  <!--            </div>-->
                  <!--            &lt;!&ndash; /.card &ndash;&gt;  -->
                  <!--          </div>-->
                  <!-- /.col (RIGHT) -->
              </div>

              <!-- 环境数据 -->
              <div class="row">
                  <div class="col-md-12">
                      <div class="card">
                          <div class="card-body p-0">
                              <table class="table table-striped">
                                  <thead>
                                  <tr>
                                      <th style="width: 15%">数据类型</th>
                                      <th style="width: 35%">时间</th>
                                      <th style="width: 35%">数据值</th>
                                      <th style="width: 15%"></th>
                                  </tr>
                                  </thead>
                                  <tbody>
                                  <tr>
                                      <td>温度一</td>
                                      <td>
                                          <div id="sensortime1"></div>
                                      </td>
                                      <td>
                                          <div class="progress progress-xs">
                                              <div class="progress-bar bg-success" id="sensorline1"
                                                   style="width: 55%"></div>
                                          </div>
                                      </td>
                                      <td><span id="sensordata1">55%</span></td>
                                  </tr>
                                  <tr>
                                      <td>温度二</td>
                                      <td>
                                          <div id="sensortime2"></div>
                                      </td>
                                      <td>
                                          <div class="progress progress-xs">
                                              <div class="progress-bar bg-success" id="sensorline2"
                                                   style="width: 70%"></div>
                                          </div>
                                      </td>
                                      <td><span id="sensordata2">70%</span></td>
                                  </tr>
                                  <tr>
                                      <td>相对湿度</td>
                                      <td>
                                          <div id="sensortime3"></div>
                                      </td>
                                      <td>
                                          <div class="progress progress-xs progress-striped active">
                                              <div class="progress-bar bg-success" id="sensorline3"
                                                   style="width: 30%"></div>
                                          </div>
                                      </td>
                                      <td><span id="sensordata3">55%</span></td>
                                  </tr>
                                  <tr>
                                      <td>噪声</td>
                                      <td>
                                          <div id="sensortime4"></div>
                                      </td>
                                      <td>
                                          <div class="progress progress-xs progress-striped active">
                                              <div class="progress-bar bg-success" id="sensorline4"
                                                   style="width: 90%"></div>
                                          </div>
                                      </td>
                                      <td><span id="sensordata4">55%</span></td>
                                  </tr>
                                  </tbody>
                              </table>
                          </div>
                          <!-- /.card-body -->
                      </div>
                      <!-- /.card -->
                  </div>
                  <!-- /.col -->
              </div>

{#              <!-- 气象数据块 -->#}
{#              <div class="row">#}
{#                  <div class="col-md-12">#}
{#                      <div class="card">#}
{#                          <div class="card-header d-flex justify-content-between">#}
{#                              <h3 class="card-title"#}
{#                                  style="font-size:1.8rem;color:#fff;text-shadow: 1px 1px 2px rgba(0,0,0,0.5)">#}
{#                                  气象数据可视化面板</h3>#}
{#                              <div class="timestamp-box">#}
{#                                  <i class="fas fa-clock text-info"></i>#}
{#                                  <span id="global-timestamp" class="ml-2" style="font-size:1.2rem;color:#fff"></span>#}
{#                              </div>#}
{#                          </div>#}
{#                          <div class="card-body">#}
{#                              <!-- 第一行：温度仪表盘 -->#}
{#                              <div class="row mb-4">#}
{#                                  <!-- 外界温度 -->#}
{#                                  <div class="col-md-6">#}
{#                                      <div class="card bg-dark">#}
{#                                          <div class="card-body text-center">#}
{#                                              <div id="externalTempGauge" style="height:220px"></div>#}
{#                                              <h5 class="text-muted mt-2">外界温度 (°C)</h5>#}
{#                                              <div class="timestamp-label">#}
{#                                                  更新时间：<span id="temp-timestamp"></span>#}
{#                                              </div>#}
{#                                          </div>#}
{#                                      </div>#}
{#                                  </div>#}
{##}
{#                                  <!-- 地表温度 -->#}
{#                                  <div class="col-md-6">#}
{#                                      <div class="card bg-dark">#}
{#                                          <div class="card-body text-center">#}
{#                                              <div id="surfaceTempGauge" style="height:220px"></div>#}
{#                                              <h5 class="text-muted mt-2">地表温度 (°C)</h5>#}
{#                                              <div class="timestamp-label">#}
{#                                                  更新时间：<span id="ts-timestamp"></span>#}
{#                                              </div>#}
{#                                          </div>#}
{#                                      </div>#}
{#                                  </div>#}
{#                              </div>#}
{##}
{#                              <!-- 第二行：湿度与风参数 -->#}
{#                              <div class="row mb-4">#}
{#                                  <div class="col-md-4">#}
{#                                      <div class="card bg-dark">#}
{#                                          <div class="card-body text-center">#}
{#                                              <div id="humidityChart" style="height:220px"></div>#}
{#                                              <h5 class="text-muted mt-2">外界湿度 (%)</h5>#}
{#                                              <div class="timestamp-label">#}
{#                                                  更新时间：<span id="humidity-timestamp"></span>#}
{#                                              </div>#}
{#                                          </div>#}
{#                                      </div>#}
{#                                  </div>#}
{##}
{#                                  <!-- 风参数仪表盘 -->#}
{#                                  <div class="col-md-8">#}
{#                                      <div class="card bg-dark">#}
{#                                          <div class="card-body">#}
{#                                              <div class="row">#}
{#                                                  <div class="col-md-3 text-center">#}
{#                                                      <div class="wind-dial-container">#}
{#                                                          <div class="wind-direction-arrow" id="windArrow"></div>#}
{#                                                          <canvas id="windDirection"></canvas>#}
{#                                                      </div>#}
{#                                                      <div class="wind-info mt-2">#}
{#                                                      <span class="badge bg-warning"#}
{#                                                            style="font-size: 1.2rem">风向</span>#}
{#                                                          <div class="d-flex flex-column align-items-center mt-2">#}
{#                                                              <div class="d-flex align-items-baseline">#}
{#                                                                  <span id="wind_direction" class="h2 mb-0">0</span>#}
{#                                                                  <span class="h4 mb-0 ml-1">°</span>#}
{#                                                              </div>#}
{#                                                          </div>#}
{#                                                      </div>#}
{#                                                  </div>#}
{#                                                  <div class="col-md-9">#}
{#                                                      <div class="param-grid">#}
{#                                                          <div class="param-item">#}
{#                                                              <i class="fas fa-wind param-icon"></i>#}
{#                                                              <span class="param-label">风速</span>#}
{#                                                              <span id="wind_speed" class="param-value"></span>#}
{#                                                              <span class="param-unit">m/s</span>#}
{#                                                          </div>#}
{#                                                          <div class="param-item">#}
{#                                                              <i class="fas fa-tachometer-alt param-icon"></i>#}
{#                                                              <span class="param-label">气压</span>#}
{#                                                              <span id="air_pressure" class="param-value"></span>#}
{#                                                              <span class="param-unit">hPa</span>#}
{#                                                          </div>#}
{#                                                          <div class="param-item">#}
{#                                                              <i class="fas fa-eye param-icon"></i>#}
{#                                                              <span class="param-label">能见度</span>#}
{#                                                              <span id="visibility" class="param-value"></span>#}
{#                                                              <span class="param-unit">km</span>#}
{#                                                          </div>#}
{#                                                      </div>#}
{#                                                      <div class="timestamp-label mt-3">#}
{#                                                          最后更新：<span id="wind-timestamp"></span>#}
{#                                                      </div>#}
{#                                                  </div>#}
{#                                              </div>#}
{#                                          </div>#}
{#                                      </div>#}
{#                                  </div>#}
{#                              </div>#}
{##}
{#                              <!-- 第三行：辐射监测 -->#}
{#                              <div class="row mb-4">#}
{#                                  <div class="col-md-8">#}
{#                                      <div class="card bg-dark">#}
{#                                          <div class="card-body">#}
{#                                              <h5 style="font-size:1.4rem;color:#ffd700"><i#}
{#                                                      class="fas fa-satellite-dish mr-2"></i>辐射监测</h5>#}
{#                                              <div class="radiation-grid">#}
{#                                                  <div class="radiation-item">#}
{#                                                      <div class="progress-container">#}
{#                                                          <div class="progress-label"#}
{#                                                               style="color:#fff;font-size:1.1rem">#}
{#                                                              太阳下行 <span id="swd-value"></span> W/m²#}
{#                                                          </div>#}
{#                                                          <div class="progress"#}
{#                                                               style="height:25px;background:rgba(255,255,255,0.1)">#}
{#                                                              <div id="swdProgress"#}
{#                                                                   class="progress-bar bg-warning progress-bar-striped"></div>#}
{#                                                          </div>#}
{#                                                      </div>#}
{#                                                  </div>#}
{#                                                  <div class="radiation-item">#}
{#                                                      <div class="progress-container">#}
{#                                                          <div class="progress-label"#}
{#                                                               style="color:#fff;font-size:1.1rem">#}
{#                                                              太阳上行 <span id="swu-value"></span> W/m²#}
{#                                                          </div>#}
{#                                                          <div class="progress"#}
{#                                                               style="height:25px;background:rgba(255,255,255,0.1)">#}
{#                                                              <div id="swuProgress"#}
{#                                                                   class="progress-bar bg-danger progress-bar-striped"></div>#}
{#                                                          </div>#}
{#                                                      </div>#}
{#                                                  </div>#}
{#                                                  <div class="radiation-item">#}
{#                                                      <div class="progress-container">#}
{#                                                          <div class="progress-label"#}
{#                                                               style="color:#fff;font-size:1.1rem">#}
{#                                                              长波下行 <span id="lwd-value"></span> W/m²#}
{#                                                          </div>#}
{#                                                          <div class="progress"#}
{#                                                               style="height:25px;background:rgba(255,255,255,0.1)">#}
{#                                                              <div id="lwdProgress"#}
{#                                                                   class="progress-bar bg-orange progress-bar-striped"></div>#}
{#                                                          </div>#}
{#                                                      </div>#}
{#                                                  </div>#}
{#                                                  <div class="radiation-item">#}
{#                                                      <div class="progress-container">#}
{#                                                          <div class="progress-label"#}
{#                                                               style="color:#fff;font-size:1.1rem">#}
{#                                                              长波上行 <span id="lwu-value"></span> W/m²#}
{#                                                          </div>#}
{#                                                          <div class="progress"#}
{#                                                               style="height:25px;background:rgba(255,255,255,0.1)">#}
{#                                                              <div id="lwuProgress"#}
{#                                                                   class="progress-bar bg-purple progress-bar-striped"></div>#}
{#                                                          </div>#}
{#                                                      </div>#}
{#                                                  </div>#}
{#                                              </div>#}
{#                                              <div class="timestamp-label mt-2">#}
{#                                                  更新时间：<span id="radiation-timestamp"></span>#}
{#                                              </div>#}
{#                                          </div>#}
{#                                      </div>#}
{#                                  </div>#}
{##}
{#                                  <!-- 电压历史图表 -->#}
{#                                  <div class="col-md-4">#}
{#                                      <div class="card bg-dark">#}
{#                                          <div class="card-body">#}
{#                                              <h5 style="font-size:1.4rem;color:#00ff00"><i#}
{#                                                      class="fas fa-chart-line mr-2"></i>电压历史</h5>#}
{#                                              <div id="voltageHistoryChart" style="height:260px"></div>#}
{#                                              <div class="timestamp-label mt-2" style="color:#fff">#}
{#                                                  最后更新：<span id="voltage-timestamp"></span>#}
{#                                              </div>#}
{#                                          </div>#}
{#                                      </div>#}
{#                                  </div>#}
{#                              </div>#}
{##}
{#                              <!-- 第四行：降水与积雪 -->#}
{#                              <div class="row">#}
{#                                  <div class="col-md-6">#}
{#                                      <div class="card bg-dark">#}
{#                                          <div class="card-body">#}
{#                                              <div class="precipitation-box">#}
{#                                                  <i class="fas fa-cloud-rain fa-3x text-primary"></i>#}
{#                                                  <div class="precipitation-info">#}
{#                                                      <div class="precipitation-value">#}
{#                                                          <span id="precipitation"></span>#}
{#                                                          <span class="unit">mm</span>#}
{#                                                      </div>#}
{#                                                      <div class="precipitation-label">降水量</div>#}
{#                                                  </div>#}
{#                                              </div>#}
{#                                          </div>#}
{#                                      </div>#}
{#                                  </div>#}
{#                                  <div class="col-md-6">#}
{#                                      <div class="card bg-dark">#}
{#                                          <div class="card-body">#}
{#                                              <div class="snow-box">#}
{#                                                  <i class="fas fa-snowflake fa-3x text-info"></i>#}
{#                                                  <div class="snow-info">#}
{#                                                      <div class="snow-value">#}
{#                                                          <span id="sd"></span>#}
{#                                                          <span class="unit">cm</span>#}
{#                                                      </div>#}
{#                                                      <div class="snow-label">雪深</div>#}
{#                                                  </div>#}
{#                                              </div>#}
{#                                          </div>#}
{#                                      </div>#}
{#                                  </div>#}
{#                              </div>#}
{#                          </div>#}
{#                      </div>#}
{#                  </div>#}
{#              </div>#}

              <!-- 异常检测块 -->
              <div class="row">
                  <!-- /.card-header -->
                  <div class="col-md-8">
                      <div class="card card-outline">
                          <div class="card-header">
                              <h3 class="card-title">
                                  图像受气象干扰情况
                              </h3>
                              <h3 class="card-title float-sm-right" id="detect-score"></h3>
                              <h3 class="card-title float-sm-right">受气象干扰指数: </h3>
                          </div>
                          <div class="card-body">
                              <img id="result" class="col-md-12">
                          </div>
                      </div>
                  </div>
                  <div class="col-md-4">
                      <div class="card card-outline">
                          <div class="card-header">
                              <h5 class="card-title">
                                  {#                    <h3 class="card-title">#}
                                  {#                        重力波图像#}
                                  {#                    </h3>#}
                                  <button class="fc-button card-title" id="uploadButton">
                                      选择图片
                                  </button>
                                  <input type="file" id="fileInput" style="display: none;" accept="image/*">
                              </h5>
                          </div>
                          <div class="card-body">
                              <img id="selected_img" class="col-md-6">
                          </div>
                      </div>
                  </div>
              </div>

          </div>
      </section>
  </div>

  <!-- Control Sidebar -->
  <aside class="control-sidebar control-sidebar-dark">
    <!-- 控制侧边栏内容在这里 -->
  </aside>
  <!-- /.control-sidebar -->

  <!-- Main Footer -->
  <!--<footer class="main-footer">
    <strong>Copyright &copy; 2014-2021 <a href="https://adminlte.io">AdminLTE.io</a>.</strong>
    保留所有权利。
    <div class="float-right d-none d-sm-inline-block">
      <b>版本</b> 3.2.0
    </div>
  </footer>-->
</div>
<!-- ./wrapper -->

<!-- 载入脚本 -->
<!-- jQuery -->
<script src="../static/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="../static/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- overlayScrollbars -->
<script src="../static/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
<!-- AdminLTE App -->
<script src="../static/js/adminlte.js"></script>

<!-- PAGE PLUGINS -->
<!-- jQuery Mapael -->
<script src="../static/plugins/jquery-mousewheel/jquery.mousewheel.js"></script>
<script src="../static/plugins/raphael/raphael.min.js"></script>
<script src="../static/plugins/jquery-mapael/jquery.mapael.min.js"></script>
<script src="../static/plugins/jquery-mapael/maps/usa_states.min.js"></script>
<!-- ChartJS -->
<script src="../static/plugins/chart.js/Chart.min.js"></script>

<!-- 用于演示 AdminLTE  -->
<script src="../static/js/demo.js"></script>
<!-- AdminLTE 仪表盘演示（仅用于演示） -->
{#<script src="../static/js/pages/dashboard2.js"></script>#}


<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>


<!-- AdminLTE App -->
<script src="../static/js/adminlte.min.js"></script>
<!-- FLOT CHARTS -->
<script src="../static/plugins/flot/jquery.flot.js"></script>
<!-- FLOT RESIZE 插件 - 允许在调整窗口大小时重新绘制图表 -->
<script src="../static/plugins/flot/plugins/jquery.flot.resize.js"></script>
<!-- FLOT PIE 插件 - 也用于绘制环形图 -->
<script src="../static/plugins/flot/plugins/jquery.flot.pie.js"></script>
<!-- uPlot -->
<script src="../static/plugins/uplot/uPlot.iife.min.js"></script>

<script src="../static/plugins/echart/echart.js"></script>

{#图像数据#}
<script>
    loadPicture()

    function loadPicture() {
        let temperature_data = []
        let timelist = []
        $.ajax({
            type: "post",
            url: "/api/image/1",
            async: false,
            datatype: "json",
            success: function (data) {
                {#console.log(data)#}
                let map = new Map(Object.entries(data));
                {#console.log(map.get("data")[0])#}
                // path1 = "<img src='../../image/image2/"+map.get("data")[0].imagePath+".png'>"
                // path2 = "<img src='../../image/image2/"+map.get("data")[1].imagePath+".png'>"
                // path3 = "<img src='../../image/image2/"+map.get("data")[2].imagePath+".png'>"
                // path4 = "<img src='../../image/image2/"+map.get("data")[3].imagePath+".png'>"
                path1 = "<img src='/file/image_02/" + map.get("data")[0]['folder_name'] + "/" + map.get("data")[0]['image_path'] + ".png' style='height: 256px;width: 256px'>"
                path2 = "<img src='/file/image_02/" + map.get("data")[1]['folder_name'] + "/" + map.get("data")[1]['image_path'] + ".png' style='height: 256px;width: 256px'>"
                path3 = "<img src='/file/image_02/" + map.get("data")[2]['folder_name'] + "/" + map.get("data")[2]['image_path'] + ".png' style='height: 256px;width: 256px'>"
                path4 = "<img src='/file/image_02/" + map.get("data")[3]['folder_name'] + "/" + map.get("data")[3]['image_path'] + ".png' style='height: 256px;width: 256px'>"
                document.getElementById("picture1").innerHTML = path1;
                document.getElementById("picture2").innerHTML = path2;
                document.getElementById("picture3").innerHTML = path3;
                document.getElementById("picture4").innerHTML = path4;
                let date1 = new Date(Date.parse(map.get("data")[0].timestamp));
                document.getElementById("timestamp1").innerText = formatDateTime(date1);
                timelist.push(formatDateTime(date1));
                let date2 = new Date(Date.parse(map.get("data")[1].timestamp));
                document.getElementById("timestamp2").innerText = formatDateTime(date2);
                timelist.push(formatDateTime(date2));
                let date3 = new Date(Date.parse(map.get("data")[2].timestamp));
                document.getElementById("timestamp3").innerText = formatDateTime(date3);
                timelist.push(formatDateTime(date3));
                let date4 = new Date(Date.parse(map.get("data")[3].timestamp));
                document.getElementById("timestamp4").innerText = formatDateTime(date4);
                timelist.push(formatDateTime(date4));
            }
        })
    }

    setInterval(loadPicture,5000);

</script>
<!-- 传感器数据表格 -->
<script>
    let firstSensorTime;
    let secondSensorTime;
    let noiseSensorTime;
    let firstSensorFirstTemperature;
    let firstSensorSecondTemperature;
    let firstSensorHumidity;
    let secondSensorFirstTemperature;
    let secondSensorSecondTemperature;
    let secondSensorFirstHumidity;
    let secondSensorSecondHumidity;
    let noise;
    function loadSensorData() {
        $.ajax({
            type: "post",
            async: true,
            url: "/api/findCurrentTemperature",
            success: function (data) {
                let map = new Map(Object.entries(data));
                map = map.get("0")
                console.log(map)
                let date = new Date(Date.parse(map.detection_time));
                firstSensorTime = formatDateTime(date);
                firstSensorFirstTemperature = map.first_temperature;
                firstSensorSecondTemperature = map.second_temperature;
                firstSensorHumidity = map.humidity;

                // 更新相关的 DOM
                document.getElementById("sensortime1").innerText = firstSensorTime;
                document.getElementById("sensortime2").innerText = firstSensorTime;
                document.getElementById("sensortime3").innerText = firstSensorTime;
                document.getElementById("sensordata1").innerText = firstSensorFirstTemperature + '℃';
                document.getElementById("sensordata2").innerText = firstSensorSecondTemperature + '℃';
                document.getElementById("sensordata3").innerText = firstSensorHumidity + '%';
                document.getElementById("sensorline1").style.width = firstSensorFirstTemperature + '%';
                document.getElementById("sensorline2").style.width = firstSensorSecondTemperature + '%';
                document.getElementById("sensorline3").style.width = firstSensorHumidity + '%';

                // 更新图表
                updateFirstSensorCharts();
            }
        });

        $.ajax({
            type: "post",
            async: true,
            url: "/api/findCurrentNoise",
            success: function (data) {
                let map = new Map(Object.entries(data));
                map = map.get("0")
                console.log(map)
                let date = new Date(Date.parse(map.detection_time));
                noiseSensorTime = formatDateTime(date);
                noise = map.noise;

                // 更新相关的 DOM
                document.getElementById("sensortime4").innerText = noiseSensorTime;
                document.getElementById("sensordata4").innerText = noise + 'dB';
                document.getElementById("sensorline4").style.width = noise + '%';


                // 更新图表
                updateNoiseChart();
            }
        });
    }

    // 更新第一个传感器图表
    function updateFirstSensorCharts() {
        let fsftc_chartDom = document.getElementById('first_sensor_first_temperature_chart');
        let fsftc_myChart = echarts.init(fsftc_chartDom);
        let fsftc_option = {
            tooltip: {
                formatter: '{a} <br/>{b} : {c}℃'
            },
            series: [
                {
                    name: '温度',
                    type: 'gauge',
                    progress: {
                        show: true
                    },
                    itemStyle: {
                        color: '#58D9F9',
                        shadowColor: 'rgba(0,138,255,0.45)',
                        shadowBlur: 10,
                        shadowOffsetX: 2,
                        shadowOffsetY: 2
                    },
                    title: {
                        textStyle: {
                            fontWeight: 'bolder',
                            fontSize: 20,
                            color: 'white'
                        }
                    },
                    min: -30,
                    max: 30,
                    detail: {
                        valueAnimation: true,
                        formatter: '{value}',
                        textStyle: {
                            color: '#FFFFFF'
                        },
                        fontSize: 20
                    },
                    data: [
                        {
                            value: firstSensorFirstTemperature,
                            name: '温度 (℃)'
                        }
                    ],
                    radius: "95%",
                    splitLine: {
                        lineStyle: {
                            color: '#FFFFFF'
                        }
                    },
                    axisTick: {
                        lineStyle: {
                            color: '#FFFFFF'
                        }
                    },
                    axisLabel: {
                        color: "#fff"
                    }
                }
            ],
            axisPointer: {
                lineStyle: {
                    color: '#FFFFFF'
                }
            }
        };

        fsftc_option && fsftc_myChart.setOption(fsftc_option);

        // 第二个温度仪表盘
        let fsstc_chartDom = document.getElementById('first_sensor_second_temperature_chart');
        let fsstc_myChart = echarts.init(fsstc_chartDom);
        let fsstc_option = {
            tooltip: {
                formatter: '{a} <br/>{b} : {c}℃'
            },
            series: [
                {
                    name: '温度',
                    type: 'gauge',
                    progress: {
                        show: true
                    },
                    itemStyle: {
                        color: '#58D9F9',
                        shadowColor: 'rgba(0,138,255,0.45)',
                        shadowBlur: 10,
                        shadowOffsetX: 2,
                        shadowOffsetY: 2
                    },
                    title: {
                        textStyle: {
                            fontWeight: 'bolder',
                            fontSize: 20,
                            color: 'white'
                        }
                    },
                    min: -30,
                    max: 30,
                    detail: {
                        valueAnimation: true,
                        formatter: '{value}',
                        textStyle: {
                            color: '#FFFFFF'
                        },
                        fontSize: 20
                    },
                    data: [
                        {
                            value: firstSensorSecondTemperature,
                            name: '温度 (℃)'
                        }
                    ],
                    radius: "95%",
                    splitLine: {
                        lineStyle: {
                            color: '#FFFFFF'
                        }
                    },
                    axisTick: {
                        lineStyle: {
                            color: '#FFFFFF'
                        }
                    },
                    axisLabel: {
                        color: "#fff"
                    }
                }
            ],
            axisPointer: {
                lineStyle: {
                    color: '#FFFFFF'
                }
            }
        };

        fsstc_option && fsstc_myChart.setOption(fsstc_option);

        // 湿度仪表盘
        let fshc_chartDom = document.getElementById('first_sensor_humidity');
        let fshc_myChart = echarts.init(fshc_chartDom);
        let fshc_option = {
            tooltip: {
                formatter: '{a} <br/>{b} : {c}%'
            },
            series: [
                {
                    name: '相对湿度',
                    type: 'gauge',
                    progress: {
                        show: true
                    },
                    itemStyle: {
                        color: '#58D9F9',
                        shadowColor: 'rgba(0,138,255,0.45)',
                        shadowBlur: 10,
                        shadowOffsetX: 2,
                        shadowOffsetY: 2
                    },
                    title: {
                        textStyle: {
                            fontWeight: 'bolder',
                            fontSize: 20,
                            color: 'white'
                        }
                    },
                    min: 0,
                    max: 100,
                    detail: {
                        valueAnimation: true,
                        formatter: '{value}',
                        textStyle: {
                            color: '#FFFFFF'
                        },
                        fontSize: 20
                    },
                    data: [
                        {
                            value: firstSensorHumidity,
                            name: '相对湿度（%）'
                        }
                    ],
                    radius: "95%",
                    splitLine: {
                        lineStyle: {
                            color: '#FFFFFF'
                        }
                    },
                    axisTick: {
                        lineStyle: {
                            color: '#FFFFFF'
                        }
                    },
                    axisLabel: {
                        color: "#fff"
                    }
                }
            ],
            axisPointer: {
                lineStyle: {
                    color: '#FFFFFF'
                }
            }
        };
        fshc_option && fshc_myChart.setOption(fshc_option);
    }

    // 噪声传感器图表更新
    function updateNoiseChart() {
        let nc_chartDom = document.getElementById('noise_chart');
        let nc_myChart = echarts.init(nc_chartDom);
        let nc_option = {
            tooltip: {
                formatter: '{a} <br/>{b} : {c}db'
            },
            series: [
                {
                    name: '噪声',
                    type: 'gauge',
                    progress: {
                        show: true
                    },
                    itemStyle: {
                        color: '#58D9F9',
                        shadowColor: 'rgba(0,138,255,0.45)',
                        shadowBlur: 10,
                        shadowOffsetX: 2,
                        shadowOffsetY: 2
                    },
                    title: {
                        textStyle: {
                            fontWeight: 'bolder',
                            fontSize: 20,
                            color: 'white'
                        }
                    },
                    min: 0,
                    max: 100,
                    detail: {
                        valueAnimation: true,
                        formatter: '{value}',
                        textStyle: {
                            color: '#FFFFFF'
                        },
                        fontSize: 20
                    },
                    data: [
                        {
                            value: noise,
                            name: '噪声 （db）'
                        }
                    ],
                    radius: "95%",
                    splitLine: {
                        lineStyle: {
                            color: '#FFFFFF'
                        }
                    },
                    axisTick: {
                        lineStyle: {
                            color: '#FFFFFF'
                        }
                    },
                    axisLabel: {
                        color: "#fff"
                    }
                }
            ],
            axisPointer: {
                lineStyle: {
                    color: '#FFFFFF'
                }
            }
        };
        nc_option && nc_myChart.setOption(nc_option);
    }

    $(function () {
        loadSensorData()
        setInterval(loadSensorData, 5000)
    })
</script>

{#<script>#}
{#    // 初始化图表#}
{#    function initCharts() {#}
{#        // 温度仪表盘#}
{#        window.externalTempGauge = echarts.init(document.getElementById('externalTempGauge'));#}
{#        window.surfaceTempGauge = echarts.init(document.getElementById('surfaceTempGauge'));#}
{#        window.humidityChart = echarts.init(document.getElementById('humidityChart'));#}
{#        window.voltageHistoryChart = echarts.init(document.getElementById('voltageHistoryChart'));#}
{##}
{#        // 温度仪表盘通用配置#}
{#        const tempGaugeOption = {#}
{#            series: [{#}
{#                type: 'gauge',#}
{#                min: -60,#}
{#                max: 60,#}
{#                axisLine: {#}
{#                    lineStyle: {#}
{#                        color: [[0.3, '#4dabf7'], [0.7, '#69db7c'], [1, '#ff6b6b']],#}
{#                        width: 20#}
{#                    }#}
{#                },#}
{#                detail: {#}
{#                    formatter: '{value}°C',#}
{#                    fontSize: 24,#}
{#                    color: '#fff'#}
{#                },#}
{#                pointer: {show: true}#}
{#            }]#}
{#        };#}
{##}
{#        // 初始化仪表盘#}
{#        externalTempGauge.setOption(tempGaugeOption);#}
{#        surfaceTempGauge.setOption(tempGaugeOption);#}
{##}
{#        // 湿度环形图#}
{#        humidityChart.setOption({#}
{#            series: [{#}
{#                type: 'pie',#}
{#                radius: ['60%', '80%'],#}
{#                label: {#}
{#                    show: true,#}
{#                    position: 'center',#}
{#                    fontSize: 24,#}
{#                    color: '#fff',#}
{#                    formatter: '{d}%'#}
{#                },#}
{#                data: [{value: 0}, {value: 100}]#}
{#            }]#}
{#        });#}
{##}
{#        // 电压历史图表#}
{#        voltageHistoryChart.setOption({#}
{#            xAxis: {#}
{#                type: 'category',#}
{#                data: [],#}
{#                axisLabel: {#}
{#                    color: '#fff',#}
{#                    fontSize: 12,#}
{#                    rotate: -45#}
{#                }#}
{#            },#}
{#            yAxis: {#}
{#                name: '电压(V)',#}
{#                nameTextStyle: {#}
{#                    color: '#fff',#}
{#                    fontSize: 14#}
{#                },#}
{#                axisLabel: {#}
{#                    color: '#fff',#}
{#                    fontSize: 12#}
{#                }#}
{#            },#}
{#            series: [{#}
{#                type: 'line',#}
{#                smooth: true,#}
{#                symbol: 'circle',#}
{#                symbolSize: 8,#}
{#                itemStyle: {#}
{#                    color: '#69db7c'#}
{#                },#}
{#                lineStyle: {#}
{#                    width: 3#}
{#                },#}
{#                areaStyle: {#}
{#                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [#}
{#                        {offset: 0, color: 'rgba(105,219,124,0.8)'},#}
{#                        {offset: 1, color: 'rgba(105,219,124,0.1)'}#}
{#                    ])#}
{#                }#}
{#            }]#}
{#        });#}
{#    }#}
{##}
{#    // 数据加载函数#}
{#    function loadData() {#}
{#        $.ajax({#}
{#            type: "post",#}
{#            url: "/api/new_data",#}
{#            success: function (data) {#}
{#                let map = new Map(Object.entries(data[0]));#}
{#                let timestamp = formatDateTime(new Date(map.get("timetamp")));#}
                {#let timestamp = map.get("timetamp");#}
{##}
{#                // 更新时间戳#}
{#                $('#global-timestamp').text(timestamp);#}
{##}
{#                // 更新温度仪表盘#}
{#                externalTempGauge.setOption({series: [{data: [{value: map.get("temperature")}]}]});#}
{#                surfaceTempGauge.setOption({series: [{data: [{value: map.get("ts")}]}]});#}
{#                $('#temp-timestamp').text(timestamp);#}
{#                $('#ts-timestamp').text(timestamp);#}
{##}
{#                // 更新湿度图表#}
{#                humidityChart.setOption({#}
{#                    series: [{#}
{#                        data: [#}
{#                            {value: map.get("humidity"), name: '当前湿度'},#}
{#                            {value: 100 - map.get("humidity")}#}
{#                        ]#}
{#                    }]#}
{#                });#}
{#                $('#humidity-value').text(map.get("humidity"));#}
{#                $('#humidity-timestamp').text(timestamp);#}
{##}
{#                // 更新风参数#}
{#                $('#wind_speed').text(map.get("wind_speed"));#}
{#                const windDir = map.get("wind_direction") || 0;#}
{#                $('#wind_direction').text(windDir);#}
{#                $('#air_pressure').text(map.get("air_pressure"));#}
{#                $('#visibility').text(map.get("visibility"));#}
{#                $('#wind-timestamp').text(timestamp);#}
{##}
{#                // 更新辐射数据#}
{#                $('#swd-value').text(map.get("swd"));#}
{#                $('#swu-value').text(map.get("swu"));#}
{#                $('#lwd-value').text(map.get("lwd"));#}
{#                $('#lwu-value').text(map.get("lwu"));#}
{#                $('#radiation-timestamp').text(timestamp);#}
{##}
{#                // 更新辐射进度条#}
{#                $('#swdProgress').css('width', `${map.get("swd") / 200 * 100}%`);#}
{#                $('#swuProgress').css('width', `${map.get("swu") / 200 * 100}%`);#}
{#                $('#lwdProgress').css('width', `${map.get("lwd") / 200 * 100}%`); // 新增长波上行#}
{#                $('#lwuProgress').css('width', `${map.get("lwu") / 200 * 100}%`); // 新增长波下行#}
{##}
{#                // 更新电压历史,待修改#}
{#                $.ajax({#}
{#                    type: "post",#}
{#                    url: "/api/voltage_history",#}
{#                    success: function (historyData) {#}
{#                        const voltages = historyData.map(d => d.bv);#}
{#                        const times = historyData.map(d => {#}
{#                            const date = new Date(d.timetamp);#}
{#                            return `${date.getMinutes().toString().padStart(2, '0')}:${date.getSeconds().toString().padStart(2, '0')}`;#}
{#                        }).reverse();#}
{##}
{#                        voltageHistoryChart.setOption({#}
{#                            xAxis: {data: times},#}
{#                            series: [{data: voltages}]#}
{#                        });#}
{#                        $('#voltage-timestamp').text(timestamp);#}
{#                    }#}
{#                });#}
{##}
{#                // 更新降水积雪#}
{#                $('#precipitation').text(map.get("precipitation"));#}
{#                $('#sd').text(map.get("sd"));#}
{##}
{#                // 更新风向指针#}
{#                const arrow = document.getElementById('windArrow');#}
{#                if (arrow) {#}
{#                    arrow.style.transform = `rotate(${windDir}deg)`;#}
{#                }#}
{#            }#}
{#        });#}
{#    }#}
{##}
{#    $(function () {#}
{#        initCharts()#}
{#        loadData()#}
{#        setInterval(loadData, 5000)#}
{#    })#}
{##}
{#</script>#}

<script>
    document.getElementById('uploadButton').addEventListener('click', function() {
        document.getElementById('fileInput').click();
    });

    document.getElementById('fileInput').addEventListener('change', function(event) {
        var file = event.target.files[0];
        var img_path = 'static\\data\\spectrogram8\\2018_10_05\\' + file.name;
        if (file) {
            var formData = new FormData();
            console.log(img_path);
            document.getElementById('selected_img').src = `${img_path}`;

            formData.append('img_path', img_path);

            fetch('/select_detect', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                var resultDiv = document.getElementById('result');
                if (data.error) {
                    resultDiv.innerHTML = 'Error: ' + data.error;
                } else {
                    let map = new Map(Object.entries(data[0]))
                    document.getElementById('detect-score').innerText = map.get('detect_score');
                    resultDiv.src = map.get('detect_image');
                }
            })
            .catch(error => {
                console.error('Error:', error);
            });
        }
    });
</script>
<!-- 时间格式化 -->
<script>
    function formatDateTime (date) {
        let y = date.getFullYear();
        let m = date.getMonth() + 1;
        m = m < 10 ? ('0' + m) : m;
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        let h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
        let minute = date.getMinutes();
        let second = date.getSeconds();
        minute = minute < 10 ? ('0' + minute) : minute;
        second = second < 10 ? ('0'+second):second;
        return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;

    }
</script>
<style>
/* 自定义样式 */
.timestamp-label { color: #6c757d; font-size: 1.2rem; }
.param-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
.param-item { background: rgba(255,255,255,0.05); padding: 15px; border-radius: 8px; }
.param-value { font-size: 1.2rem; font-weight: bold; }
.radiation-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.progress-container { margin-bottom: 15px; }
.progress-label { color: #fff; margin-bottom: 5px; }
.precipitation-box, .snow-box {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
}
.precipitation-info, .snow-info { flex-grow: 1; }
.precipitation-value, .snow-value {
    font-size: 2.5rem;
    font-weight: bold;
    line-height: 1;
}
.wind-dial-container {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto;
}
.wind-direction-arrow {
    position: absolute;
    width: 2.5px;
    height: 80%;
    background: #ffd700;
    left: 50%;
    transform-origin: bottom;
    transition: transform 0.5s ease;
}
/* 风向数值居中 */
.wind-info {
    text-align: center;
}
.wind-info #wind_direction {
    font-size: 1.5rem;
    line-height: 1.2;
}

/* 参数标题放大 */
.param-label {
    font-size: 1.2rem !important;
    font-weight: 600;
    display: block;
    margin-bottom: 8px;
    color: #fff;
}
.param-value {
    font-size: 1.2rem;
    font-weight: bold;
}
.param-unit {
    font-size: 1.2rem;
    margin-left: 4px;
}
.param-icon {
    font-size: 1.3rem;
    margin-bottom: 8px;
}
</style>
</body>
</html>
